<template>
    <div id="app">
        <TioHeader ref="TioHeader"></TioHeader>
    
        <div class="tio_body" id="tio_body">
            <im ref="im"></im>
        </div>
    </div>
</template>

<script src="./components/chat_pb.js" type="text/javascript"></script>
<script>
import TioHeader from './components/TioHeader';
import Im from './components/Im';
// import Chat from './components/Chat';
// import Userlist from './components/Userlist';
import WsClient from './components/WsClient';
import ImListener from './components/ImListener';


// let wsClient = new WsClient('127.0.0.1:9321', null, 60 * 1000);
// let ws = wsClient.connect();
// document.write(ws);

// let imListener = new ImListener(ws);
// imListener.onmessage('dddd');


export default {
    name: 'app',
    components: {
        TioHeader, Im
    }
}
</script>


<style  >
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
}

:root {
    overflow-y: auto;
    overflow-x: hidden;
}

:root body {
    position: absolute;
}

body {
    width: 100vw;
    overflow: hidden;
}

#app {
    height: 100%;
}

.tio_header {
    /**/
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 60px;
    background-color: #e5e5e5;
    border-bottom: 1px solid #e1e1e1
}

.tio_body {
    padding: 0px;
    margin: 0px;
    height: calc(100% - 60px);
}
</style>

